<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
#div1 input{
	background: white;
}
#div1 input.active{
	background: yellow;
}
#div1 div{
	padding: 10px 10px;
	width: 203px;
	height: 150px;
	background: #ccc;
	display: none;
	
}
#div1 div.active{
	display: block;
}
	
	</style>
	</head>
	<body>
		<div id="div1">
		<input type="button"value="前端开发"class="active"/>
		<input type="button" value="Android开发" />
		<input type="button"  value="UI设计" />
		<div class="active">HTMLS\CSS\javascrip\js框架</div>
		<div>java\android原生\混合</div>
		<div>PS\设计基础</div>
		</div>
		<script type="text/javascript">
			var dom=document.getElementById('div1');
			var btns=dom.getElementsByTagName('input');
			var divs=dom.getElementsByTagName('div');
			for(var i=0;i<btns.length;i++){
				btns[i].onclick=function(){
					for (var j=0;j<btns.length;j++) {	
				btns[j].style.background='white';
			}
			this.style.background='yellow';
			for(var k=0;k<divs.length;k++){
				if(this==btns[k]){
					divs[k].style.display='block'
				}else{
					divs[k].style.display='none'
				}
			}
		}
			
		}
		
		</script>
	</body>
</html>
